<template>
  <van-nav-bar title="购物车" fixed placeholder />

  <div class="list">
    <div class="item" v-for="item in cartArr" :key="item.cartid">
      <img :src="item.img1" alt="" />
      <div>{{ item.proname }}</div>
      <div>{{ item.originprice }}</div>

      <van-stepper v-model="item.num" @change="cartNumChangeFn(item)" />

      <van-button type="danger" @click="cartDelFn(item.cartid)">删除</van-button>

      <van-checkbox v-model="item.flag" @change="cartSelectOnFn(item)">复选框</van-checkbox>
    </div>
  </div>

  <van-submit-bar :price="countPrice" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="allChecked" @click="selectAllChange">全选</van-checkbox>
    <template #tip> 你的收货地址不支持配送, <span @click="onClickLink">修改地址</span> </template>
  </van-submit-bar>
</template>

<script setup>
import { ref, watchEffect, computed } from "vue";
// 引入全局状态
import { cartArr, loadCartList } from "@/store/cart";

// /src/store/cart.js 文件没有提供 这个cartUpdateNumReq模块
// The requested module '/src/store/cart.js?t=1736577512970' does not provide an export named 'cartUpdateNumReq'
import { cartDeleteReq, cartUpdateNumReq, cartSelectOneReq, cartSelectAllReq } from "@/api/cart";

let allChecked = ref(false);

// 监听数组的改变--计算是否应该是全选
watchEffect(function () {
  console.log(cartArr.value.length);
  if (cartArr.value.length == 0) {
    allChecked.value = false;
  } else {
    let flag = cartArr.value.every((v) => v.flag == true);
    console.log(flag);
    // 修改了 allChecked --又触发了 全选按钮的change事件
    allChecked.value = flag;
  }
});

// 监听数组的改变--计算是否应该是全选 计算总价
// watchEffect(function () {});
let countPrice = computed(function () {
  // van-submit-bar 传入的总价是以分为单位的，是为了避免我们算价格的时候有小数，产生误差
  let r = cartArr.value
    .filter((v) => v.flag == true)
    .reduce((sum, v) => sum + v.num * v.originprice * 100, 0);

  return r;
});

//全选的change 事件
function selectAllChange() {
  console.log(allChecked.value);
  cartSelectAllReq(allChecked.value).then(() => {
    loadCartList();
  });
}

function onSubmit() {}

function onClickLink() {}
function cartSelectOnFn(item) {
  cartSelectOneReq(item.cartid, item.flag).then(() => {
    //选中状态更新成功-刷新列表
    loadCartList();
  });
}

function cartNumChangeFn(item) {
  console.log(item);
  cartUpdateNumReq(item.cartid, item.num).then((r) => {
    console.log(r.data);
    //删除成功-刷新列表
    loadCartList();
  });
}

async function cartDelFn(cartid) {
  let r = await cartDeleteReq(cartid);
  console.log(r.data);
  //删除成功-
  // 刷新购物车列表-修改全局状态
  loadCartList();
}

// let cartArr = ref([
//   {
//     id: 1,
//     title: "aa",
//     img: "http://gips0.baidu.com/it/u=583074985,2627467797&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
//     num: 2,
//     checked: true,
//   },
//   {
//     id: 2,
//     title: "bb",
//     img: "http://gips0.baidu.com/it/u=583074985,2627467797&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
//     num: 4,
//     checked: false,
//   },
// ]);
</script>

<style scoped>
.item img {
  width: 100px;
}
.van-submit-bar {
  bottom: 51px;
}
.list {
  margin-bottom: 150px;
}
</style>
